<template>
	<div>
		<div class="cart-list-main flex" >
			<div class="cart-list-left flex">
                <input class='check' type="checkbox" v-model="itemInfo.checked" @click="isCheck">
				<img :src="itemInfo.image" alt="" class="goods-img">
			</div>
			<div class="cart-list-right">
				<div class="goods-name one-txt-cut">{{itemInfo.title}}</div>
				<div class="goods-info flex">
					<span class="price">￥{{itemInfo.price}}</span><span class="num">x{{itemInfo.count}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CartListItem',
		props: {
			itemInfo: {
                type: Object,
			
			}
        },
        
        methods:{
            isCheck(){
                this.itemInfo.checked = !this.itemInfo.checked
            }
        }
	}
</script>

<style lang="less" scoped="scoped">
	.cart-list-main {
        display: flex;
		padding: 10px;
		border-bottom: 1px solid #ececec;
	}
	.cart-list-left {
        display: flex;
		width: 26%;
		align-items: center;
		.check{
			width: 20px;
			height: 20px;
            
		}
		
		.goods-img {
			width: 52px;
			height: 66px;
			border: 1px solid #ececec;
			margin:0 10px;
			border-radius: 6px;
		}
	}
	.cart-list-right {
        display: flex;
        flex-direction: column;
        width: 74%;
        justify-content: space-between;
		.goods-name {
			width: 100%;
			font-size: 13px;
		}
		.goods-info {
            display: flex;
            justify-content: space-between;
			.price {
				color: #F9CD0B;
            }
		}
    }

</style>
